<!DOCTYPE html>
<html>
  <head>
    <title>积分商城</title>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
	  <link rel="stylesheet" href="${s.base}/mobile/base/css/weui.min.css">
	  <link rel="stylesheet" href="${s.base}/mobile/base/css/jquery-weui.css">
	  <link rel="stylesheet" href="${s.base}/mobile/wechat/css/base.css">
	  <link rel="stylesheet" href="${s.base}/mobile/wechat/css/component.css">
    <link rel="stylesheet" href="${s.base}/mobile/wechat/css/index.css">
    <style type="text/css">
	
	.xyg-nav{width: 96%; height: auto; margin: 0px 2%; padding: 0.1rem 0px;}
	.xyg-nav .icon_size{width:1.2rem; height:1.2rem; margin-top:0.4rem;}
	.xyg-nav .xyg-nav-content{width:100%; height: 2rem;line-height: 2rem; text-align: center; font-size:0.8rem; color: #2c394c;letter-spacing: 0.02rem;}
	.xyg-nav .xyg-nav-content-right{float: right;}
	.xyg-nav .xyg-nav-content-left{float: left;}
	.xyg-comp-banner{
		width:100%;
		height:7rem;
	}
	.xyg-comp-banner img{
		width:100%;
		height:7rem;
	}
		.xyg-index{width:100%; padding:0.4rem 0px;}
  	.xyg-menu{width:94%;height:auto; margin:0.5rem 3%;}
	.xyg-menu .xyg-menu-item{width:25%; height:auto; float:left;}
	.xyg-menu .xyg-menu-item .xyg-menu-item-pic{width:100%; height:2rem;text-align:center;}
	.xyg-menu .xyg-menu-item .xyg-menu-item-pic img{width:auto; height:2rem; max-width:100%; margin:0.2rem auto;}
	.xyg-menu .xyg-menu-item .xyg-menu-item-title{width:100%; height:1.5rem; text-align:center; line-height:1.5rem; font-size:14px; color:#000; letter-spacing:0.1rem;}
	</style>
  </head>
  <body>
  <div class="xyg-nav">
	  <div class="xyg-nav-content">
	  	<span class="xyg-nav-content-left"><svg class="icon" aria-hidden="true"><use xlink:href="#iconxiangzuo"></use></svg></span>
	  	积分商城
	  </div>
  </div>  
  <div class="xyg-index">
      <!--banner图开始-->
	  <#if webBannerList??&&(webBannerList?size gt 0)>
		  <div class="xyg-comp-banner swiper-container">
			  <div class="swiper-wrapper">
				  <#list webBannerList as webBanner>
					  <div class="swiper-slide"><img src="${webBanner.image}" /></div>
				  </#list>
			  </div>
			  <div class="swiper-pagination xyg-comp-banner-swiper"></div>
		  </div>
	  </#if>
      <!--banner图结束-->
      <!--导航开始-->
      <!--<div class="xyg-menu">
        <div class="xyg-menu-item">
           <a href="courser.html">
            <div class="xyg-menu-item-pic">
                <img src="${s.base}/mobile/wechat/images/jfsc_icon_1.png"/>
            </div>
            <div class="xyg-menu-item-title">
                 购物车
            </div>
           </a>
        </div>
        <div class="xyg-menu-item">
           <a href="javascript:goMyDetailPage('${memberId}');">
            <div class="xyg-menu-item-pic">
                <img src="${s.base}/mobile/wechat/images/jfsc_icon_2.png"/>
            </div>
            <div class="xyg-menu-item-title">
                我的订单
            </div>
			</a>
        </div>
        <div class="xyg-menu-item">
           <a href="javascript:goMyScorePage('${memberId}');">
            <div class="xyg-menu-item-pic">
                <img src="${s.base}/mobile/wechat/images/jfsc_icon_3.png"/>
            </div>
            <div class="xyg-menu-item-title">
                积分明细
            </div>
			</a>
        </div>
        <div class="xyg-menu-item">
            <div class="xyg-menu-item-pic">
                <img src="${s.base}/mobile/wechat/images/jfsc_icon_4.png"/>
            </div>
            <div class="xyg-menu-item-title">
                积分提佣
            </div>
        </div>
        <div class="clearBoth"></div>
      </div>-->
      <!--导航结束-->
	  <div style="width: 100%;background: #f3f3f3; height: 0.5rem;">
	  </div>
	  <style type="text/css">
		  .xyg-lptc{width: 100%; height: auto; background: #ffffff; padding-bottom: 1rem;}
		  .xyg-lptc-content{width: 91%; padding-left:0.1rem; padding-top: 0.1rem; height: auto; margin: 0px 4%; background: #f3f3f3;}
		  .xyg-lptc-content .xyg-lptc-content-item{width:32.6%; height:auto; margin: 0rem 0.1rem 0.1rem 0px; background: #ffffff;float: left;}
		  .xyg-lptc-content .xyg-lptc-content-item img{width:4rem; height:4rem; border-radius: 2rem; margin: 0.2rem auto;}
		   .xyg-lptc-content .xyg-lptc-content-item .xyg-lptc-content-item-title{width:100%; line-height: 1rem; height:1rem; text-align: center; color: #000000; font-weight: bold; font-size: 0.8rem;}
		  .xyg-lptc-content .xyg-lptc-content-item .xyg-lptc-content-item-score{width:100%; height:1.2rem; text-align: center; color: #b3b3b3; font-size: 0.6rem;}
		  .xyg-comp-menu-three-left-right .scroller li{padding: 0px 0.3rem;}
		  .xyg-comp-menu-three-left-right .clearfix a{color: #666666; font-size: 0.8rem;}
		 .xyg-comp-menu-three-left-right .scroller li.cur a {
			color: #cc0000;
			height:40px;
			 font-size:0.8rem;
			border-bottom: 2px solid #cc0000;
		}
		 .xyg-comp-menu-three-left-right{border-bottom:0px;}
		  .xyg-comp-two-column-item-bottom-price{color: #cc0000;}
	  </style>
	  <!--礼品套餐开始-->
	  <div class="xyg-lptc">
	 
	  	<!--标题开始-->
		<div class="xyg-comp-nav-1">
			<div class="xyg-comp-nav-1-title">
				<div class="xyg-comp-nav-1-title-content">
					&nbsp;&nbsp;礼品套餐
				</div>
				<div class="xyg-comp-nav-1-title-desc">
				</div>
				<div class="clearBoth">
				</div>
			</div>
			<div class="xyg-comp-nav-1-icon">
			</div>
		</div>
    	<!--标题结束-->
		<!--内容开始-->
		<div class="xyg-lptc-content">
			<#list webProductList as webProduct>
			<div class="xyg-lptc-content-item">
				<img src="${webProduct.coverImage}"/>
				<div class="xyg-lptc-content-item-title">${webProduct.name}</div>
				<div class="xyg-lptc-content-item-score">${webProduct.score}积分</div>
			</div>
			</#list>
			<div class="clearBoth"></div>
		</div>
	    <!--内容结束-->

	  </div>
	<!--礼品套餐结束 -->
	<div style="width: 100%;background: #f3f3f3; height: 0.5rem;">
	</div>
  <!--左右菜单导航三开始-->
  <div class="wrapper xyg-comp-menu-three-left-right" id="retr">
	  <div class="scroller">
		  <ul class="clearfix">
			  <li style="margin-left: 0px; margin-right: 0px;" class="cur" onclick="changeType('',this)">
			  	<a href="javascript:void(0)">全部商品</a>
			  </li>
			  <#list webColumnTypeList as columnType>
				  <li style="margin-left: 0px; margin-right: 0px;" onclick="changeType('${columnType.id}',this)">
					  <a href="javascript:void(0)">${columnType.name}</a>
				  </li>
			  </#list>
		  </ul>
	  </div>
  </div>
  <!--左右菜单导航三结束-->
<!-- 二行商品栏目开始 -->
  <div class="xyg-comp-two-column">

  </div>
  <!-- 二行商品栏目结束 -->
  </body>
  <script src="https://res.wx.qq.com/open/js/jweixin-1.3.2.js"></script>
  <script src="${s.base}/mobile/base/js/jquery-2.1.4.js" type="text/javascript" charset="utf-8"></script>
  <script src="${s.base}/mobile/base/js/jquery-weui.js" type="text/javascript" charset="utf-8"></script>
  <script src="${s.base}/mobile/base/js/swiper.js" type="text/javascript" charset="utf-8"></script>
  <script src="${s.base}/mobile/base/js/component.js?12323434323232323232" type="text/javascript" charset="utf-8"></script>
  <script src="${s.base}/mobile/wechat/fonts/iconfont.js"></script>
  <script src="${s.base}/mobile/wechat/js/window_port.js"></script>
  <script src="${s.base}/mobile/wechat/js/iscroll.js"></script>
  <script src="${s.base}/mobile/wechat/js/base.js"></script>
   <script type="text/javascript">
    var memberId='${memberId}';
    var currentColId="";
    $(document).ready(function(e) {
        initDate();
    });

    function initDate() {
        //初始化分类
        $('.wrapper').navbarscroll();
        //初始化商品
        initProduct();
    }


    function changeType(colId,obj) {
        currentColId=colId;
        pageNum = 0;
        $(".xyg-comp-two-column").html("");
        if(isDestroy){
            isDestroy = false;
            $(document.body).infinite().on("infinite", function () {
                if (loading) return;
                loading = true;
                sendPost();
            });
        }else{
            sendPost();
        }
    }


    var memberId='${memberId}';
    var pageNum = 0;
    var pageSize = 5;
    var loading = false;  //状态标记
    var isDestroy = false;  //状态标记
    /**
     * 初始化内容页面信息
     * @param cityId
     */
    function initProduct() {
        isDestroy = false;
        $(document.body).infinite().on("infinite", function () {
            if (loading) return;
            loading = true;
            sendPost();
        });
        sendPost();
    }

    function sendPost() {
        pageNum++;
        $.fn.postMethodAll("/weChat/product/page",{'pageNum':pageNum,'pageSize':pageSize,'colId':currentColId},function (result) {
            if (result.data != null && result.data.length > 0) {
                result.data.forEach(function (item,key,mapObj) {
                    var str='<div class="xyg-comp-two-column-item" onclick="goProductDescPage(\''+memberId+'\',\''+item.id+'\')">'+
                        '<div class="xyg-comp-two-column-item-pic"><div class="xyg-pic"><div class="xyg-pic-ysw">'+
                        '</div><div class="xyg-pic-top">'+
                        '</div>'+
                        '<img src="'+item.coverImage+'"/></div></div>'+
                        '<div class="xyg-comp-two-column-item-title product-font-title-normal font-grade-one">'+item.name+'</div>'+
                        '<div class="xyg-comp-two-column-item-bottom">'+
                        '<div class="xyg-comp-two-column-item-bottom-price product-font-price-normal font-grade-one">'+item.score+'积分</div>'+
                        '<div class="xyg-comp-two-column-item-bottom-buy">已售'+item.saleNum+'</div></div></div>';
                    $(".xyg-comp-two-column").append(str);
                });
                loading = false;
                if (!result.hasNextPage) {
                    $(document.body).destroyInfinite();
                    isDestroy=true;
                }
            } else {
                $(document.body).destroyInfinite();
                isDestroy=true;
            }
        });
    }
    </script>
  
</html>

